<template>
  <div>
    <div>订单</div>
    <div v-if="!isLogin">您还没有登录</div>
    <div class="orders" v-if="isLogin">
      <div v-for="item in orderList" :key="item.id">
        <img
          style="width:100px ; height:100px;border-radius: 15px;"
          :src="item.pic"
          alt=""
        />
        <span style="width:300px">{{ item.name }} x {{ item.count }}</span>
        <span
          style="
      color: red;
      font-size: 20px;
      font-weight: 600;
      "
        >
          ￥{{ item.totalvalue }}
        </span>
        <el-button
          @click="removeOrder(item)"
          type="danger"
          icon="el-icon-delete"
          circle
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderList: [],
      isLogin: sessionStorage.getItem('isLogin')
    }
  },
  mounted() {
    this.getOrder()
  },
  methods: {
    // 点击删除订单
    removeOrder(item) {
      // console.log(item)
      // 弹窗询问用户是否结算
      this.$confirm('此操作将结算该物品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const {
            data: res
          } = await this.$http.post(
            'http://localhost:3000/api/users/order/delete',
            { id: item.id }
          )
          // console.log(res)
          if (res.status !== true) {
            return this.$message.error('删除失败')
          }
          this.$message.success('删除成功')
          this.getOrder()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取购物车内容
    async getOrder() {
      const userId = sessionStorage.getItem('user_id')
      const { data: res } = await this.$http.get(
        'http://localhost:3000/api/users/order/' + userId
      )
      this.orderList = res.data
      console.log(res.data)
    }
  }
}
</script>

<style lang="less" scoped>
.orders {
  max-height: 780px;
  border-radius: 20px;
  overflow-y: scroll;
  scrollbar-width: none;
  box-shadow: inset 0px 15px 15px -15px rgba(0, 0, 0, 0.3),
    inset 0px -15px 15px -15px rgba(0, 0, 0, 0.3);

  > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #dcdfe6;
  }
  > div:nth-last-child(1) {
    margin-bottom: 0px;
  }
}
</style>
